<template>
  <PageView :title="title" :content="content" :isHeard="isHeard">
    <a-row>
      <a-col :span="6">
        <a-card class="desktop-grid desktop-success">
          <div class="desktop-title">浏览量</div>
          <div class="border-bottom pb-2 mb-1">62,0076</div>
          <div class="tx-12">当日12,423</div>
          <div class="card-icon-wrapper"><EyeOutlined /></div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="desktop-grid desktop-danger">
          <div class="desktop-title">浏览量</div>
          <div class="border-bottom pb-2 mb-1">62,0076</div>
          <div class="tx-12">当日12,423</div>
          <div class="card-icon-wrapper"><EyeOutlined /></div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="desktop-grid desktop-primary">
          <div class="desktop-title">浏览量</div>
          <div class="border-bottom pb-2 mb-1">62,0076</div>
          <div class="tx-12">当日12,423</div>
          <div class="card-icon-wrapper"><EyeOutlined /></div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="desktop-grid desktop-info">
          <div class="desktop-title">浏览量</div>
          <div class="border-bottom pb-2 mb-1">62,0076</div>
          <div class="tx-12">当日12,423</div>
          <div class="card-icon-wrapper"><EyeOutlined /></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="16">
        <a-card title="今日访问量" :bordered="false" class="mt-4 desktop-grid">
          <div id="mydayEcharts" style="height: 300px; position: relative"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="上周访问量" :bordered="false" class="mt-4">
          <div id="myEcharts" style="height: 300px; position: relative"></div>
        </a-card>
      </a-col>
    </a-row>
    
  </PageView>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import PageView from "../components/PageView.vue";
import * as echarts from "echarts";
import { Watch } from "vue-property-decorator";
import {
  EyeOutlined
} from '@ant-design/icons-vue';

@Options({
  components: {
    HelloWorld,
    PageView,
    EyeOutlined
  },
})
export default class Home extends Vue {
  public title: string = "工作台";
  public isHeard: boolean = false;
  private myChart: any;
  private myDayChart: any;
  private width = 0;
  private option: any = {
    grid:{
      x:30,y:10,x2:10,y2:30
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周七"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [
          {
            value: 120,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
          {
            value: 700,
            itemStyle: {
              color: "#ff420f"
            },
          },
          {
            value: 150,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
          {
            value: 80,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
          {
            value: 450,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
          {
            value: 550,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
          {
            value: 240,
            itemStyle: {
              color: "#ff420f",
              opacity:0.4
            },
          },
        ],
        type: "bar",
      },
    ],
  };

  private dayOption:any = {
    grid:{
      x:30,y:10,x2:10,y2:30
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0点','1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点'
        , '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};

  public async mounted(): Promise<void> {
    this.width = document.documentElement.clientWidth;
    await this.drawLineChart();
    window.onresize = () => {
      this.myChart.resize();
      this.myDayChart.resize();
    };
  }

  @Watch("document.documentElement.clientWidth")
  getPiedata(newVal:Array<object>,oldVal:Array<object>) {
  }

  public async drawLineChart(): Promise<any> {
    setTimeout(() => {
      let lineChart: HTMLElement = document.getElementById("myEcharts") as HTMLElement;
      let lineMyChart: HTMLElement = document.getElementById("mydayEcharts") as HTMLElement;
      this.myChart = echarts.init(lineChart);
      this.myChart.setOption(this.option, true);

      this.myDayChart = echarts.init(lineMyChart);
      this.myDayChart.setOption(this.dayOption, true);
    });
  }

  public destroyed(): void {
    window.onresize = null;
  }
}
</script>
<style lang="less">
.desktop-grid {
  margin-right: 20px;
  .desktop-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 9px;
  }
  .card-icon-wrapper {
    position: absolute;
    top: 50%;
    width: 57px;
    height: 57px;
    border-radius: 2px;
    right: -10px;
    width: 57px;
    height: 57px;
    display: flex;
    transform: translateY(-50%);align-items: center;justify-content:center;
    span{font-size: 25px;color: #fff;font-weight: normal;}
  }
}
.desktop-success {
  .card-icon-wrapper {
    background-color: #00b67a;
    box-shadow: 0 0 10px 5px rgba(0, 182, 122, 0.35);
  }
}
.desktop-danger {
  .card-icon-wrapper {
    background-color: #ff420f;
    box-shadow: 0 0 10px 5px rgba(255, 66, 15, 0.35);
  }
}
.desktop-primary {
  .card-icon-wrapper {
    background-color: #7a00ff;
    box-shadow: 0 0 10px 5px rgba(122, 0, 255, 0.35);
  }
}
.desktop-info {
  .card-icon-wrapper {
    background-color: #00bbdd;
    box-shadow: 0 0 10px 5px rgba(0, 187, 211, 0.35);
  }
}
</style>